<template>
  <div>
    

    <!-- 头部 -->
     <header>
      <!-- 导航栏 -->
      <div class="tou">小U商城</div>
      <div class="header-top">
         <img  class="img6" src="../assets/icon_1uru4ldavix/location.png" alt="">
        <span class="iconfont icon-position">
         
          <img class="header-topimg" src="../assets/img/logo.png" alt />
        </span>
        
        <input type="text" placeholder=" 请输入关键字" />
        <span class="iconfont icon-shangcheng">
          <img class="img6" src="../assets/icon_1uru4ldavix/shouye.png" alt="">
        </span>
      </div>
      <div class="header-bottom">
        <nav>
          <ul>
            <li>
              <a>家用电器</a>
              <!-- {{item.catename}} -->
            </li>
            <li>
              <a>手机通信</a>
              <!-- {{item.catename}} -->
            </li>
            <li>
              <a>电脑办公</a>
              <!-- {{item.catename}} -->
            </li>
            <li>
              <a>家具</a>
              <!-- {{item.catename}} -->
            </li>
            <li>
              <a>服装</a>
              <!-- {{item.catename}} -->
            </li>
            <li>
              <a>水果</a>
              <!-- {{item.catename}} -->
            </li>
            <li>
              <a>零食</a>
              <!-- {{item.catename}} -->
            </li>
            <li>
              <a>化妆品</a>
              <!-- {{item.catename}} -->
            </li>
          </ul>
        </nav>
        <!-- 分类 -->
        <div class="fen">
          <span >
            <img class="img1" src="../assets/icon_1uru4ldavix/fenlei.png" alt="">
            <a href>分类</a>
          </span>
        </div>
      </div>
    </header>
    <!-- 导航栏 -->
    <div class="daohang">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="item in goodsList1" :key="item.id">
          <img class="img2" :src="item.img" />
        </van-swipe-item>
      </van-swipe>
      <!-- <van-grid :column-num="5">
     <van-grid-item v-for="item2 in 5" :key="item2.id" icon={{item2.img}} text={{item2.cateName}} />
    </van-grid> -->
      <div class="sub">
        <ul class="dapai">
          <li>
            <a href=""
              ><img src="../assets/img/home/品质大牌.png" alt="" />
              <h3>品质大牌</h3></a
            >
          </li>
          <li>
            <a href=""
              ><img src="../assets/img/home/小u自营.png" alt="" />
              <h3>小u自营</h3></a
            >
          </li>
          <li>
            <a href=""
              ><img src="../assets/img/home/畅销商品.png" alt="" />
              <h3>畅销商</h3></a
            >
          </li>
          <li>
            <a href=""
              ><img src="../assets/img/home/积分兑换.png" alt="" />
              <h3>积分兑换</h3></a
            >
          </li>
          <li>
            <a href=""
              ><img src="../assets/img/home/限时抢购.png" alt="" />
              <h3>限时抢购</h3></a
            >
          </li>
        </ul>
      </div>
    </div>

    <div class="container">
      <div class="containe">
        <div class="submenu">
          <!-- <img src="../assets/img/home/seckill/图1.png" alt="" /> -->
          <h2>限时秒杀</h2>
          <a href>
            <b>查看更多></b>
          </a>
          <!-- <p>每天0点场 好货秒不停</p>/ -->
          <div class="time">
            <div class>05</div>
            <div>:</div>
            <div>20</div>
            <div>:</div>
            <div>48</div>
          </div>
        </div>
        <div class="submenu1">
          <!-- <img src="../assets/img/home/seckill/图2.png" alt="" /> -->
          <h2>品牌上新</h2>
          <a href>
            <b>九点整，抢大牌</b>
          </a>
          <a href>
            <div>疯狂抢红包</div>
          </a>
        </div>
        <div class="submenu2">
          <!-- <img src="../assets/img/home/seckill/图3.png" alt="" /> -->
          <h2>日用好物</h2>
          <p>愿君多采撷</p>
          <a href>
            <div>塞满奖券</div>
          </a>
        </div>
        <!-- ========= 畅够 ========= -->
        <div class="purchase">
          <ul>
            <li>
              <a href>
                <h2>双11尖货预购</h2>
              </a>
              <div class="article">
                <div class="photo">
                  <img src="../assets/img/home/Changgou/底1.png" alt />
                  <p>套装/礼盒</p>
                </div>
                <div class="photo photo1">
                  <img src="../assets/img/home/Changgou/底2.png" alt />
                  <p>彩妆套装</p>
                </div>
                <div class="photo photo2">
                  <img src="../assets/img/home/Changgou/底3.png" alt />
                  <p>身体乳液/霜</p>
                </div>
                <div class="photo photo3">
                  <img src="../assets/img/home/Changgou/底4.png" alt />
                  <p>爽肤水/化妆水</p>
                </div>
              </div>
            </li>
            <li>
              <a href>
                <h2>畅购全球</h2>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <hr />
      <ul class="goods1">
        <li
          @click="goDetail(item)"
          class="goods"
          v-for="item in goodsList"
          :key="item.id"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="goodsInfo">
            <p>商品名称:{{ item.name }}</p>
            <p>商品价格：{{ item.price }}</p>
          </div>
        </li>
      </ul>

    
    </div>
  </div>
</template>

<script>
import index from "@/pages/index.vue";

export default {
  components: { index },
  data() {
    return {
      cateList: [
        {
          id: 1,
          cateName: "家用电器",
        },
        {
          id: 2,
          cateName: "手机通讯",
        },
        {
          id: 3,
          cateName: "家具",
        },
        {
          id: 4,
          cateName: "电脑办公",
        },
      ],
      goodsList: [
        {
          id: 1,
          name: "华为遥遥领先",
          price: 999,
          img: require("../assets/images/1.jpg"),
        },
        {
          id: 2,
          name: "iphone 15 Pro Max",
          price: 8999,
          img: require("../assets/images/2.jpg"),
        },
        {
          id: 3,
          name: "OPPO real13",
          price: 3877,
          img: require("../assets/images/3.jpg"),
        },
        {
          id: 4,
          name: "小米 保时米",
          price: 1999,
          img: require("../assets/images/4.jpg"),
        },
        {
          id: 5,
          name: "小米 保时米",
          price: 1999,
          img: require("../assets/images/4.jpg"),
        },
        {
          id: 6,
          name: "小米 保时米",
          price: 1999,
          img: require("../assets/images/4.jpg"),
        },
      ],
      goodsList1: [
        {
          id: 1,

          img: require("../assets/img/home/shop/11.jpg"),
        },
        {
          id: 2,

          img: require("../assets/img/home/shop/22.jpg"),
        },
        {
          id: 3,

          img: require("../assets/img/home/shop/33.jpg"),
        },
        {
          id: 4,

          img: require("../assets/img/home/shop/444.jpg"),
        },
      ],
      goodsList2: [
        {
          id: 1,
          cateName: "畅销商品",
          img: require("../assets/img/home/畅销商品.png"),
        },
        {
          id: 2,
          cateName: "限时抢购",
          img: require("../assets/img/home/限时抢购.png"),
        },
        {
          id: 3,
          cateName: "积分兑换",
          img: require("../assets/img/home/积分兑换.png"),
        },
        {
          id: 4,
          cateName: "小u自营",
          img: require("../assets/img/home/小u自营.png"),
        },
        {
          id: 5,
          cateName: "品质大牌",
          img: require("../assets/img/home/品质大牌.png"),
        },
      ],
    };
  },
  methods: {
    goList(id) {
      this.$router.push(`/list?id=${id}`);
    },
    goDetail(item) {
      this.$router.push(`/datail?datail=${JSON.stringify(item)}`);
    },
  },
};
</script>

<style lang="less" scoped>
.goods {
  padding: 5px 10px;
  width: 95%;
  border: 1px solid #ccc;
  margin: 10px auto;
  border-radius: 10px;
  display: flex;
  .img {
    width: 120px;
    img {
      width: 120px;
      height: 120px;
    }
  }
  .goodsInfo {
    margin: 10px;
  }
}
goods1 {
  width: 95%;
}
.tou {
  width: 100%;
  background-color: #fb4723;

  height: 46px;
  color: #323233;

  font-size: 24px;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
header {
  /* height: 170px; */
  background-image: linear-gradient(
      180deg,
      #fb4723 0%,
      #f7573f 31%,
      #fa7c68 71%,
      #ff8a80 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
  box-shadow: 0.01rem 0.01rem 0.02rem 0rem #fd7373;
}
// .toubu {
//   height: 100%;
//   height: 116px;
//   background-image: linear-gradient(
//       180deg,
//       #fb4723 0%,
//       #f7573f 31%,
//       #fa7c68 71%,
//       #ff8a80 100%
//     ),
//     linear-gradient(#fff3f2, #fff3f2);
//   box-shadow: 0.01rem 0.01rem 0.02rem 0rem #fd7373;
// }
.img1 {
  width: 0.3rem;
  height: 0.3rem;
  // background-color: #ffffff;
  // color: rgb(255, 255, 255);
}
.ul2 {
  height: 0.8rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.ul2 input {
  width: 3.4rem;
  height: 0.6rem;
  font-size: 0.28rem;
  background: #fff;
  border-radius: 0.06rem;
  border: 0.02rem solid #e6e6e6;
}
.ul1 {
  width: 100%;
  height: 30px;
  float: left;

  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.ul1 li {
  float: left;
}
.fenlei {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 水平居中 */
  height: 30px;
  float: left;
}
.fenlei div {
  float: right;
}
// 1
// 1
// 1
// 导航栏
.daohang {
  flex-direction: column;
  justify-content: space-between;
  width: 7.1rem;
  height: 5.4rem;
  background-color: #ffffff;
  padding: 0.2rem 0.2rem 0;
}
.daohang van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.img2 {
      width: 7.1rem;
    height: 3.9rem;
}
.sub {
  width: 7.1rem;
  margin: 0.2rem 0rem;
  display: flex;
}
.sub ul {
  display: flex;
  width: 7.1rem;
  justify-content: space-between;
  align-items: center;
}
.sub ul li {
  display: flex;
  /* align-items: center; */
}
.sub ul li a {
  width: 0.8rem;
  /* height: 1.3rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sub ul li img {
  display: flex;
  align-items: center;
  width: 0.5rem;
  height: 0.5rem;
}
.sub ul li a h3 {
  display: flex;
  display: block;
  font-size: 0.2rem;
  line-height: 0.38rem;
  color: #000000;
  white-space: nowrap;
}

.header-top {
  height: 0.8rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.header-topimg {
  color: white;
  width: 1.8rem;
  height: 0.45rem;
}
.header-top input {
  width: 3.4rem;
  height: 0.6rem;
  font-size: 0.28rem;
  background: #fff;
  border-radius: 0.06rem;
  border: 0.02rem solid #e6e6e6;
}
.header-bottom {
  height: 0.6rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header-bottom ul {
  display: flex;
  width: 6.5rem;
  overflow: auto;
}
.header-bottom ul a {
  display: block;
  padding: 0.08rem 0.2rem 0.05rem 0.2rem;
  font-size: 0.26rem;
  line-height: 0.38rem;
  color: #fff;
  white-space: nowrap;
}
.header-bottom .fen {
  width: 0.83rem;
  height: 0.5rem;
  box-shadow: -0.01rem -0.01rem 0.03rem 0rem #b42929;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.header-bottom .fen .iconfont {
  font-size: 0.25rem;
}
.header-bottom .fen span a {
  width: 0.8rem;
  color: white;
}




.container {
  width: 7.1rem;
  height: 25.8rem;
  background: #f2f2f2;
  padding: 0.1rem 0.12rem 0rem 0.13rem;
  margin: 0rem 0rem 0rem 0rem;
}
.containe {
  width: 7.1rem;
  height: 3.8rem;
  background: #f2f2f2;
  padding: 0.1rem 0.1rem 0rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
}
.container .submenu {
  width: 3.5rem;
  height: 3.5rem;
  background-image: url(../assets/img/home/seckill/图1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  float: left;
}
.container .submenu h2 {
  display: inline-block;
  margin: 0rem 0.1rem;
  font-weight: 500;
  font-size: 0.45rem;
  color: #85a642;
}
.container .submenu b {
  float: right;
  margin: 0.17rem 0.11rem;
  font-size: 0.25rem;
  color: #000000;
}
.container .submenu p {
  float: left;
  margin: 0rem 0.1rem;
  font-size: 0.2rem;
  color: #b6ce82;
}
.container .submenu1 {
  width: 3.5rem;
  height: 1.7rem;
  background-image: url(../assets/img/home/seckill/图2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
}
.container .submenu1 h2 {
  display: inline-block;
  margin: 0rem 0.1rem;
  font-weight: 500;
  font-size: 0.45rem;
  color: #ff6040;
}
.container .submenu1 a b {
  float: left;
  margin: 0.05rem 0.15rem;
  font-size: 0.23rem;
  color: #ff9580;
}
.container .submenu1 > a > div {
  width: 1.2rem;
  height: 0.4rem;
  float: left;
  margin: 0.4rem -1.75rem;
  border-radius: 0.1rem 0.5rem 0.5rem 0.1rem;
  background-image: linear-gradient(
      180deg,
      #ff6040 0%,
      #ff7560 71%,
      #ff8a80 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
  color: white;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.2rem;
}
.container .submenu2 {
  width: 3.5rem;
  height: 1.7rem;
  background-image: url(../assets/img/home/seckill/图3.png);
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  margin-top: 0.1rem;
}
.container .submenu2 h2 {
  float: left;
  margin: 0rem 0.1rem;
  font-size: 0.4rem;
  color: #b042ff;
}
.container .submenu2 p {
  float: left;
  margin: 0.6rem -1.65rem;
  color: #ca80ff;
}
.container .submenu2 > a > div {
  width: 1.2rem;
  height: 0.4rem;
  float: left;
  margin: 0.95rem -1.65rem;
  border-radius: 0.1rem 0.5rem 0.5rem 0.1rem;
  background-image: linear-gradient(
      180deg,
      #b042ff 0%,
      #cd61ff 71%,
      #f489ff 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
  color: white;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.2rem;
}/* 限时秒杀倒计时 */
.container .submenu > .time {
  margin-left: 8px;
}
.container .submenu > .time div {
  float: left;
  width: 0.45rem;
  height: 0.45rem;
  background-image: linear-gradient(180deg, #85a642 0%, #b1cc7a 100%);
  border-radius: 0.02rem;
  font-size: 0.35rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.45rem;
}
.container .submenu > .time > div:nth-child(2) {
  width: 0.1rem;
  background-image: linear-gradient(180deg, #e6eadb 0%, #e6eadb 100%);
  color: #78a125;
  font-size: 0.2rem;
}
.container .submenu > .time div:nth-child(4) {
  width: 0.1rem;
  background-image: linear-gradient(180deg, #e6eadb 0%, #e6eadb 100%);
  color: #78a125;
  font-size: 0.2rem;
}

/* ========= 畅够 =========  */
.container .purchase {
  width: 7.1rem;
  height: 2.85rem;
  background-color: white;
  float: left;
  margin-top: 0.2rem;
}
.container .purchase ul li {
  width: 3.55rem;
  height: 0.65rem;
  float: left;
}
.container .purchase ul li a {
  height: 0.65rem;
  display: block;
  color: #999;
}
.container .purchase ul li a:hover {
  color: #ff6040;
}
.container .purchase ul li a h2 {
  text-align: center;
  line-height: 0.65rem;
  font-size: 0.3rem;
}
.container .purchase ul li .article {
  width: 7.09rem;
  height: 2.15rem;
  display: flex;
  justify-content: space-between;
}

.container .purchase ul li .article .photo {
  display: flex;
  width: 1.6rem;
  height: 2.15rem;
  flex-direction: column;
  justify-content: space-evenly;
}
.container .purchase ul li .article .photo img {
  width: 1.6rem;
  height: 1.6rem;
}
.container .purchase ul li .article p {
  /* width: 180px; */
  /* height: 20px; */
  font-size: 0.18rem;
  color: black;
  float: left;
  align-self: center;
  justify-content: space-evenly;
}
.img6{
  width: 0.5rem;
  height: 0.5rem;
}
</style>
